<template>
  <div class="order-list">
    <div class="order el-row">
      <div class="el-col el-col-16 order-status">
        <b>订单号：1111629130244506</b>
      </div>
      <div class="el-col el-col-8 trr">
        <span class="place">我的地址</span>
      </div>
    </div>

    <div class="el-row order-details">
      <div class="el-col el-col-1 list-inp">
        <input type="checkbox" v-if="list" class="el-checkbox">
      </div>
      <div class="el-col el-col-12">
        <div class="disin list-img">
          <img src="https://file.gfresh.cn/product/2016/80/7acd822f-9ee5-425c-983f-b1312e187347/102641304.png" alt="">
          <p>海外原包</p>
          <div class="b_g"></div>
        </div>
        <div class="list-timer">
          <h3>冰川 智利 大西洋鲑鱼 养殖（北京市发货）</h3>
          <p>25/千克/箱  6~6+KG/条</p>
          <span>2018-08-15</span>
        </div>
      </div>
      <div class="tc mt20 el-col el-col-4 waits">
        <p class="wait1">¥<em class="allEm">40.00</em>/500g</p>
        <p class="wait2 tc">¥<em class="allEm">2000</em>/箱</p>
      </div>
      <div class="tr mt20 el-col el-col-3">
        <p>1</p>
      </div>
      <div class="tc mt20 el-col el-col-4 ml60">
        <p>¥<em class="allEm">2050.00</em></p>
        <p>(含运费¥<em class="allEm">50.00</em>)</p>
      </div>
      <div class="tr mt20 el-col el-col-7 but">
        <button type="button" v-if="list">订单详情</button>
        <button type="button" v-if="list" class="ml10">去付款</button>
      </div>
      <font>取消订单</font>
    </div>

  </div>
</template>

<script>
    export default {
        name: "Orders",
      data(){
          return {

          }
      },
      props:{
          list:Boolean
      }
    }
</script>

<style scoped>
  .order-list {
    margin-top: 20px;
    height: 215px;
    border-bottom: 1px solid #dbdbdb;
  }

  .order {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    line-height: 72px;
  }

  .order-status {
    line-height: 72px;
  }

  .order-status b {
    font-size: 16px;
    color: #333;
  }

  .trr {
    text-align: right;
  }

  .place {
    font-size: 14px;
    text-align: right;
  }

  .order-details {
    display: -webkit-box;
    display: flex;
    margin-bottom: 32px;
    position: relative;
  }

  .el-checkbox {
    cursor: pointer;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    outline: 0;
    line-height: 1;
    vertical-align: middle;
    border-color: #bfcbd9;
    border: 1px solid #bfcbd9;
    border-radius: 4px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  }

  .list-inp {
    margin-left: 14px;
    margin-top: 22px;
  }

  .list-img {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
  }

  .list-img img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .list-img p {
    position: absolute;
    bottom: 6px;
    left: 20px;
    display: inline-block;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #bdbdbd;
    z-index: 99;
    color: #333;
    font-size: 12px;
    padding: 0 3px;
  }

  .b_g {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0px;
    opacity: 0.5;
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  }

  .list-timer {
    position: absolute;
    top: 0;
    left: 150px;
    width: 250px;
  }

  .list-timer h3 {
    font-size: 16px;
    font-weight: bold;
    display: inline;
    color: #333;
  }

  .list-timer p {
    font-size: 14px;
    margin-top: 8px;
    color: #777;
  }

  .list-timer span {
    color: #777;
    padding: 2px 5px;
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #bdbdbd;
  }

  .waits {
    line-height: 20px;
  }

  .wait1 {
    font-size: 14px;
    white-space: nowrap;
    color: #333;
  }

  .allEm {
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
  }

  .wait2 {
    font-style: normal;
    line-height: 20px;
    font-size: 14px;
  }

  .but {
    display: flex;
    height: 40px;
    justify-content: flex-end;
    box-sizing: border-box;
  }

  .but button {
    border-color: #19a79a;
    color: #19a79a;
    background: none;
    border-radius: 2px;
    padding: 12px 15px;
    font-size: 14px;
    box-sizing: border-box;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border-width: thin;
  }

  .but button:hover {
    background: #19a79a;
    border-color: #19a79a;
    color: #fff;
  }

  .order-details font {
    position: absolute;
    right: 0;
    bottom: -26px;
    font-size: 14px;
    color: rgb(51, 51, 51);
    cursor: pointer;
  }

  .tc {
    text-align: center;
  }

  .mt20 {
    margin-top: 20px;
  }

  .ml10 {
    margin-left: 10px;
  }

  .ml60 {
    margin-left: 60px;
  }

  .tr {
    text-align: right;
  }

  .disin {
    display: inline-block;
  }


</style>
